<template>
  <div class="nbStatistics">
    <!-- NB表和集中器每日上报率 -->
    <dictionariesPlus :searchData="searchData" modelType="table" @optionData="dictionariesCallBack"></dictionariesPlus>
    <div class="searchItem">
      <el-select class="el_inp selectItem" clearable v-model="typeName" size="mini" placeholder="请选择" :filterable=" true" @change="getType">

        <template v-for="(item,index) in meterList">

          <el-option :disabled="index == 1" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </template>

      </el-select>
      <el-date-picker :picker-options='pickerBeginDateBefore' class="el_inp" size="mini" v-model="statisticsDate" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" clearable></el-date-picker>
    </div>
    <div id="NbConcent" class="Nbconcent"></div>
  </div>
</template>

<script>
const echarts = require('echarts')
import { NbToConcent } from '@/api/collectingDevices/flConcentratorManager/index'
import { getDates } from '@/utils/index'
import { dictionariesPlus } from '@/views/components/FLPage'

export default {
  name: 'NbConcent',
  components: {
    dictionariesPlus,
  },
  props: {
    oCzHisRead: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      type: '3',
      typeName: '',
      statisticsDate: getDates(),
      echarts: '',
      waterData: [],
      meterList: [],
      resData: [],
      pickerBeginDateBefore: {
        disabledDate: (time) => {
          return time.getTime() > new Date().getTime() - 24 * 60 * 60 * 1000
        },
      },
      searchData: [
        {
          EN: 'type',
          CN: '水表类型',
          value: '',
          type: 'select',
          option: [],
          typeGroupCode: 'meter_style',
          result: true,
          sign: true,
          searchSign: false,
          addSign: false,
          tableSign: false,
          examineSign: false,
          examineDisabled: false,
          modificationSign: false,
          configurationSign: false,
        },
      ],
    }
  },
  created() {
    this.statisticsDate = getDates()
  },
  watch: {
    statisticsDate(newValue, oldValue) {
      if (oldValue != newValue) this.AlwaysCopyData()
    },
  },
  methods: {
    changeHeightWidth(i, x, y, height, width) {
      console.log('height, width', height, width)
      let NbConcent = document.getElementById('NbConcent')
      NbConcent.style.height = height - 45 + 'px'
      NbConcent.style.width = width - 15 + 'px'
      this.echarts = this.$echarts.init(NbConcent)
      this.echarts.resize()
    },

    getType(e) {
      this.type = e
      this.AlwaysCopyData()
    },
    dictionariesCallBack([a = {}, b = {}]) {
      let meterList = a.hasOwnProperty('type') && a.type
      this.meterList = meterList
        .filter((item) => item.value == 2 || item.value == 3)
        .reverse()
      this.typeName = this.meterList[0].label
      this.type = this.meterList[0].value
    },
    createEcharts() {
      // 基于准备好的dom，初始化echarts实例
      this.echarts = echarts.init(document.getElementById('NbConcent'))
      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
          position: ['20', '20'],
        },
        legend: {
          orient: 'vertical',
          right: '10%',
          top: '10%',
          itemWidth: 25,
          data: ['已抄', '未抄'],
        },
        /* graphic: [
          {
            type: 'group',
            left: '10',
            top: 30,
            children: [
              {
                type: 'text',
                z: 100,
                left: 'center',
                top: 'middle',
                style: {
                  fill: '#333',
                  text: ['总数:0', '已抄:0', '未抄:0'].join('\n'),
                  font: '20px Microsoft YaHei',
                },
              },
            ],
          },
        ], */
        color: ['#2CC4D7', '#1374FE', '#D8D60E', '#D8210E'], //五个数据，五个颜色
        series: [
          {
            name: '抄表统计',
            type: 'pie',
            radius: '80%',
            data: this.resData,
            labelLine: {
              show: false,
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      }
      // 使用刚指定的配置项和数据显示图表。
      this.echarts.setOption(option)
      window.addEventListener('resize', () => {
        this.echarts.resize()
      })
    },
    // 获取集中器统计数
    async AlwaysCopyData(call) {
      let resData = []
      let { type, statisticsDate } = this
      const { data = [] } = await NbToConcent({ type, statisticsDate })
      let { tolNum = 0, wcNum = 0, ycNum = 0 } = data.length && data[0]

      this.resData = resData = [
        {
          value: ycNum,
          name: '已抄 ' + ycNum,
          type: this.type,
        },
        {
          value: wcNum,
          name: '未抄 ' + wcNum,
          type: this.type,
        },
      ]

      this.echarts.setOption({})
      this.echarts.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
        },
        legend: {
          orient: 'vertical',
          left: '60%',
          top: 'center',
          data: [
            { name: '已抄 ' + ycNum, value: ycNum },
            { name: '未抄 ' + wcNum, value: ycNum },
          ],
        },
        /*  graphic: [
          {
            type: 'group',
            left: '10',
            top: 30,
            children: [
              {
                type: 'text',
                z: 100,
                left: 'center',
                top: 'middle',
                style: {
                  fill: '#333',
                  text: [
                    '总数:' + tolNum, //  + '\n'
                    '已抄:' + ycNum,
                    '未抄:' + wcNum,
                  ].join('\n'),
                  font: '20px Microsoft YaHei',
                },
              },
            ],
          },
        ], */
        series: [
          {
            color: ['#0B9AC3', '#E69620', '#D8D60E', '#D8210E'],
            name: '抄表统计',
            type: 'pie',
            radius: '70%',
            center: ['30%', '50%'],
            data: resData,
            itemStyle: {
              normal: {
                label: {
                  show: false, //隐藏标示文字
                },
                labelLine: {
                  show: false, //隐藏标示线
                },
              },
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      })
      var _this = this
      this.echarts.on('click', function (params) {
        let {
          data: { type },
        } = params
        let url = '/shuiBiaoXinXi/'
        url += type == '2' ? 'flNbMeterInfo' : 'flConMeterInfo'
        _this.$router.push({
          path: url,
        })
      })
      call && call()
    },
  },
  mounted() {
    this.createEcharts()
    this.AlwaysCopyData(() => {
      let width =
        document.querySelector('.nbStatistics').parentNode.parentNode.parentNode
          .style.width
      let height =
        document.querySelector('.nbStatistics').parentNode.parentNode.parentNode
          .clientHeight
      console.info('width--NB', width.split('p')[0], '--height--NB:', height)
      this.changeHeightWidth(0, 0, 0, height, Number(width.split('p')[0]) - 15)
    })
  },
  beforeDestroy() {
    window.removeEventListener('resize', () => {
      this.echarts.resize()
    })
  },
}
</script>

<style lang="scss" scoped>
.nbStatistics {
  .Nbconcent {
    width: 320px;
    height: 220px;
    margin-top: -30px;
  }
  .searchItem {
    display: flex;
    padding: 15px 0;
    .selectItem {
      margin-right: 15px;
    }
  }
}
</style>

